<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // vue构造函数的实现原理,数据的双向绑定依赖于es6中的defineProperty(),存取器属性
      // defineProperty() ,可以将指定对象中的数据更换为存取属性,对其获取与存储都进行管理,动作可视化
      // 创建构造函数vue
      function Vue({ data }) {
        // 接收配置对象中含有data参数,data数据存储在_data属性中
        this._data = data
        // 数据代理就是在其实例上存储一份和_data中数据一样的值
        for (const key in data) {
          // 但是这种存储方式,在实例对象中是不存在和_data中的联系的,我们需求的是双方可以同步修改,同步获取
          // 即-  在实例上的值,修改时是修改_data中的值,获取实例上的值时其实也是获取_data中的值
          //   这时就可以使用defineProperty()创建存取器属性
          Object.defineProperty(this, key, {
            get() {
              return this._data[key]
            },
            set(value) {
              this._data[key] = value
            },
          })
          // 这样就实现了数据的代理,存在于实例上的数据是_data中的数据的映射
        }
      }
      let vm = new Vue({
        data: {
          neme: '张三',
          age: 18,
        },
      })
      console.log(vm)
    </script>
  </body>
</html>
